<template>
  <div>
    <h1>树形控件的使用</h1>
    <!-- default-expand-all	是否默认展开所有节点
      props用户修改树形控件默认配置
        label: 修改用于渲染内容的属性名(默认值'label')
     -->
    <el-tree :data="treeData" :props="{label:'name'}" default-expand-all>
      <template v-slot="{data}">
        <!-- data是tree组件通过作用域插槽传回来的treeData数组里面的对象 -->
        <el-row style="width:100%" type="flex" justify="space-between">
          <div>{{ data.name }}</div>
          <div>小明 操作</div>
        </el-row>
      </template>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          name: '技术部',
          children: [
            {
              name: 'java研发部'
            },
            {
              name: '前端研发部'
            }
          ]
        },
        {
          name: '运营部'
        }
      ]
    }
  }
}
</script>

<style scoped>
</style>
